<template>
  <el-dialog :close-on-click-modal="false" v-model="visible" title="starrockts配置" @close="resetForm" width="60%">
    <el-form ref="formRef" :model="formData" :rules="formRules" label-width="140px">
      <el-row>
        <el-col :span="24">
          <el-form-item prop="tableName" label="表名">
            <el-input disabled v-model="formData.tableName" placeholder="请输入外部资源名" />
          </el-form-item>
        </el-col>
        <el-col :span="24">
          <el-form-item prop="uniqueKey" label="唯一索引">
            <el-tag style="margin-right: 5px" v-for="(i, j) in formData.uniqueKey" :key="j">{{ i }}</el-tag>
            <el-button size="small" type="primary" @click="selectUniqueKey">选择</el-button>
          </el-form-item>
        </el-col>
        <el-col :span="24">
          <el-form-item prop="distributed" label="分布列">
            <el-input v-model="formData.distributed" placeholder="请输入分布列" />
          </el-form-item>
        </el-col>
        <el-col :span="24">
          <el-form-item prop="replicationNum" label="分片数">
            <el-input v-model="formData.replicationNum" placeholder="请输入分片数" />
          </el-form-item>
        </el-col>
        <el-col :span="24">
          <el-form-item prop="inMemory" label="是否进行内存存储">
            <el-radio v-model="formData.inMemory" label="true">是</el-radio>
            <el-radio v-model="formData.inMemory" label="false">否</el-radio>
          </el-form-item>
        </el-col>
        <el-col :span="24">
          <el-form-item prop="storageFormat" label="存储格式">
            <el-input v-model="formData.storageFormat" placeholder="请输入存储格式" />
          </el-form-item>
        </el-col>
        <el-col :span="24">
          <el-form-item prop="enablePersistentIndex" label="是否持久化索引">
            <el-radio v-model="formData.enablePersistentIndex" label="true">是</el-radio>
            <el-radio v-model="formData.enablePersistentIndex" label="false">否</el-radio>
          </el-form-item>
        </el-col>
        <el-col :span="24">
          <el-form-item prop="compression" label="压缩算法">
            <el-input v-model="formData.compression" placeholder="请输入压缩算法" />
          </el-form-item>
        </el-col>
      </el-row>
    </el-form>
    <template #footer>
      <el-button @click="visible = false">取消</el-button>
      <el-button type="primary" :loading="submitBtnLoading" @click="handleCreate">确认</el-button>
    </template>
  </el-dialog>
  <el-dialog v-model="columnVisible" title="选择索引" width="60%" @close="columnVisible = false">
    <el-table ref="tableRef" :data="columnData" style="width: 100%">
      <el-table-column type="selection" width="55" />
      <el-table-column prop="COLUMN_NAME" label="字段名" />
      <el-table-column prop="DATA_TYPE" label="字段类型" />
    </el-table>
    <template #footer>
      <el-button @click="columnVisible = false">取消</el-button>
      <el-button type="primary" @click="handelColumnSubmit">确认</el-button>
    </template>
  </el-dialog>
</template>

<script setup>
import { watch } from 'vue-demi'
import { createsStarrocktsProperties } from '@/api/datasourceCenter'
import { findColumnName } from '@/api/datasourceCenter'
const props = defineProps({
  data: {
    type: Object,
    default: () => {}
  },
  visible: {
    type: Boolean,
    default: false
  }
})
const emit = defineEmits(['update:visible', 'create', 'update'])
const formRef = ref()
const submitBtnLoading = ref(false)
const columnVisible = ref(false)
const columnData = ref([])
const tableRef = ref(null)
const formData = reactive({
  databaseId: '',
  tableName: '',
  uniqueKey: [],
  distributed: '',
  replicationNum: '',
  inMemory: 'false',
  storageFormat: '',
  enablePersistentIndex: 'false',
  compression: ''
})
const formRules = reactive({})
const resetForm = () => {
  formRef.value?.resetFields()
  emit('update:visible')
}
const selectUniqueKey = () => {
  columnVisible.value = true
}
const handelColumnSubmit = () => {
  const selectedRows = tableRef.value.getSelectionRows()
  console.log(selectedRows)
  formData.uniqueKey = selectedRows.map((item) => item.COLUMN_NAME)
  columnVisible.value = false
}
const handleCreate = () => {
  emit('create', formData)
  resetForm()
}
watch(
  () => props.visible,
  (val) => {
    if (val) {
      console.log(props.data)
      formData.databaseId = props.data.databaseId
      formData.tableName = props.data.tableName
      findColumnName(props.data).then((res) => {
        columnData.value = res.data
      })
    }
  }
)
</script>

<style lang="scss" scoped></style>
